<template>
	<view style="padding: 30rpx;">
		<view class="container">
			<view class="column">
				<view class="note" v-for="(item, index) in notes" :key="index" 
					  @click="goViewNote(item.file, item.note_id)" @longpress="deleteMyNote(index)">
					  <view class="title">{{ item.title }}</view>
					  <view class="summary">{{ item.summary }}</view>
				</view>
		    </view>
		</view>
		<view class="noteButton">
			<button class="Btn" style="margin-bottom: 5%;" ref="myButton"
					@click = "goDirectory">管理我的收藏夹</button>
		</view>
	</view>
</template>

<script>
	import config from '@/config.js';
	
	export default {
		data() {
			return {
				notes:[
					
				],
				user:[
					
				]
			}
		},
		
		onLoad(){
			this.user = uni.getStorageSync('xm-user');
			let that = this;
			uni.request({
				url: config.baseUrl + "/note/findByUser?user_id=" + this.user.id,
				method: 'GET',
				success(res){
					that.notes = res.data;
					console.log(that.notes);
				},
				fail(res){
					console.log(res);
				}
			})
			
		},
		
		methods: {
			goDirectory(){
				uni.navigateTo({
					url:'/pages/directory/directory'
				})
			},
			
			goViewNote(query,id){
				uni.navigateTo({
					url:'/pages/noteView/noteView?noteId=' + id + '&FileName=' + query
				})
			},
			
			deleteMyNote(index){
				let that = this;
				let noteid=that.notes[index].note_id;
								
				uni.showModal({
					title: '提示',
					content: '确定删除所选笔记?',
					success: (res) => {
						if(res.confirm){
							uni.request({
								url:config.baseUrl +'/note/'+ noteid,
								method:'DELETE',
								success(res){
									that.notes.splice(index,1)
									console.log('删除成功啦')
								}
							})
						}
					}
				})
								
			}
		}
}
</script>

<style scoped>
	.container{
		background-color: white;
		padding: 20rpx;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .1);
		display: flex;
		justify-content: space-between;
	}
	
	.column{
		margin-left: 5%;
		width: 90%;
	}
	
	.note {
		background-color: #f8f8f8;
		margin-bottom: 10px;
		padding: 10px;
		border-radius: 5px;
		word-wrap: break-word;
	}
	
	.title {
		font-weight: bold;
	}
	
	.summary {
		margin-top: 5px;
		color: #666;
	}
	
	.noteButton{
		position: fixed;
		bottom: 0;
		width: 95%;
	}
	
	.Btn{
		border-radius: 10px;
		cursor: pointer;
		font-size: 16px;
		margin-right: 5%;
	}
	
</style>
